<template>
<div>
    <Card>
        <Detail v-show="currView=='detail'" @close="currView='index'"/>
        <div v-show="currView=='index'">
            <Row class="mb10">
                <Button type="primary" @click="currView='detail'">进入详情页</Button>
            </Row>
            <Table :columns="columns" :data="data"></Table>
            <ul>
                <Item :list="list"></Item>
            </ul>
        </div>
    </Card>
</div>
</template>

<script>
import Item from "../components/item"
import Detail from "../components/detail"
export default {
    components: {
        Item,
        Detail
    },
    props: {
        list: Array,
    },
    data() {
        return {
            currView:'index',
            columns:[
                {
                    title:'序号',
                    type:'index',
                    align:'center',
                },
                {
                    title:'姓名',
                    key:'name',
                    align:'center',
                    className:'name',
                },
                {
                    title:'年龄',
                    key:'age',
                    align:'center',
                },
                {
                    title:'班级',
                    key:'className',
                    align:'center',
                },
                {
                    title:'操作',
                    key:'action',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',[
                            h('Button',
                            {
                                props:{
                                    type:"primary",
                                    size:"small",
                                },
                                on:{
                                    click:()=>{
                                        this.view(params.row)
                                    }
                                }
                            },
                            '查看')
                        ])
                    }
                },
            ],
            data:[]
        }
    },

    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted(){
            // console.log("in list",this.list);
            this.gatDataList();
        },
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    computed: {},
    methods: {
        gatDataList(){
            this.data=new Array(5).fill({
                name:"lilei",
                className:"三年2班",
                age:18,
                cellClassName: {
                    age: 'demo-table-info-cell-age',
                }
            });
        },
    },
    watch: {},
    filters: {}
}
</script>

<style>
    .ivu-table .demo-table-info-cell-age {
        background-color: #ff6600;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-address {
        background-color: #187;
        color: #fff;
    }
    .name{
        background-color: aqua;
    }
</style>
